class Particle extends Spirit {
  constructor(x = 0, y = 0, vx = 0, vy = 0) {
    super('fire.png')

    this.x = x
    this.y = y

    this.vx = vx
    this.vy = vy

    this.ax = 0
    this.ay = 0

    this.frames = 20
  }

  update() {
    let p = this
    p.x += p.vx
    p.y += p.vy

    p.vx += p.ax
    p.vy += p.ay

    p.frames--
  }
}

class ParticleSystem {
  constructor() {
    this.particles = []
    this.numberOfParticles = 20
    this.x = 200
    this.y = 100
    this.setup()
  }

  setup() {

  }
  update() {

    if (this.particles.length < this.numberOfParticles) {

      let vx = utils.random(-200, 200) * 0.01
      let vy = utils.random(-100, 200) * 0.01

      let ax = utils.random(-200, 200) * 0.001
      let ay = utils.random(-200, 200) * 0.001

      let p = new Particle(this.x, this.y, vx, vy)

      p.ax = ax
      p.ay = ay

      this.particles.push(p)
    }

    for (const p of this.particles) {
      p.update()
    }

    this.particles = this.particles.filter(p => p.frames > 0)

  }
  draw(context) {
    for (const p of this.particles) {
      p.draw(context)
    }
  }
}